<template>
  <div class="dc-slider sa-flex">
    <el-slider v-model="sliderValue" :show-tooltip="false" :min="min" :max="max" @input="changeSlider"></el-slider>
    <el-input v-model="sliderInput" type="number" @input="changeInput">
		<template #suffix>
			<slot name="suffix">
				<span class="el-input__icon">PX</span>
			</slot>
		</template>
    </el-input>
  </div>
</template>
<script>
  export default {
    name: 'dc-slider',
  };
</script>
<script setup>
  import { onUpdated, ref } from 'vue';

  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: Number,
      default: 0,
    },
    mult: {
      type: Number,
      default: 1,
    },
	max: {
      type: Number,
      default: 100,
    },
	min: {
      type: Number,
      default: 0,
    },
  });

  const sliderValue = ref(props.modelValue / props.mult);
  function changeSlider(sv) {
    sliderInput.value = Number(sv * props.mult);
    emit('update:modelValue', Number(sv * props.mult));
  }

  const sliderInput = ref(props.modelValue);
  function changeInput(si) {
    sliderValue.value = Number(si / props.mult);
    emit('update:modelValue', Number(si));
  }

  onUpdated(() => {
    sliderValue.value = props.modelValue / props.mult;
    sliderInput.value = props.modelValue;
  });
</script>
<style lang="scss" scoped>
  .dc-slider {
    .el-slider {
      flex: 1;
    }
    :deep() {
      .el-slider {
        --el-slider-height: 4px;
        --el-slider-button-size: 12px;
      }
      .el-input {
        width: 70px;
        margin-left: 16px;
      }
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
      }
      input[type='number'] {
        -moz-appearance: textfield;
      }
    }
  }
</style>
